<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="${pageContext.request.contextPath}/">
		<meta charset="UTF-8">
		<title>角色信息统计</title>
	</head>
	
	<body>
	<select id="myselect">
	   <option value="Column2D.swf">2D柱状图</option>
	   <option value="Column3D.swf">3D柱状图</option>
	   <option value="Pie2D.swf">2D饼状图</option>
	   <option value="Pie3D.swf">3D饼状图</option>
	</select>
	<div id="mzl">在这加载图形</div><!--定义一个div用于存放图形-->
		<!-- 全局js -->
	    <script src="resource/admin/js/jquery.min.js?v=2.1.4"></script>
	    <script src="resource/admin/js/bootstrap.min.js?v=3.3.6"></script>
	    <!--引入主类库-->
		<script src="resource/fusioncharts/fusioncharts.js"></script>
		<script type="text/javascript">
		$(function(){
			$("#myselect").change(function(){
				test01($(this).val());
			}).trigger("change");//模拟选择功能
			
			function test01(type) {
				var obj = {
					chart:{
						yaxisname:"用户数",
						caption:"角色用户统计图",
						numbersuffix:"位",
						useroundedges:1,
						bgcolor:"FFFFFF,FFFFFF",
						showborder:1
					}	
				};
				$.post("sys/role/user",function(data){
					var chart = new FusionCharts(type, "ChartId_"+type, "650", "300", "0", "0");
					obj["data"]=data;
					chart.setJSONData(JSON.stringify(obj));
					chart.render("mzl");
				},"json");
			}
		});
		    
		/* var json= '{"chart": {"yaxisname": "Sales Figure","caption": "Top 5 Sales Person","numberprefix": "$","useroundedges": "1","bgcolor": "FFFFFF,FFFFFF","showborder": "0"},"data": [{"label": "Alex","value": "25000"},{"label": "Mark","value": "35000"},{"label": "David","value": "42300"},{"label": "Graham","value": "35300"},{"label": "John","value": "31300"}]}'; 
		    
		var chart = new FusionCharts("Column2D.swf", "ChartId", "650", "300", "0", "0");
		//创建一个FusionCharts对象，第一个参数为swf文件的路径，第二个为id用来标识这个对象，第三个为宽度，第四个为高度
		//chart.setDataURL("data/data.xml");//xml文件
		//  chart.setDataXML(xmldata);
		chart.setJSONData(json);
		chart.render("mzl");//将FusionCharts对象填充到指定的div标签处：render（div）
		 */
		</script>
	</body>

</html>